<template>
  <div class="material-report-container">
    <!-- 顶部筛选区 -->
    <div class="filter-container">
      <el-card shadow="hover" class="filter-card">
        <el-form :inline="true" :model="filterForm" label-width="70px">
          <!-- 第一行 -->
          <el-form-item label="日期" class="filter-form-item wide">
            <el-date-picker v-model="timeList" type="datetimerange" range-separator="~"
                            start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="filterForm.drugName" placeholder="请输入药品名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="编码">
            <el-input v-model="filterForm.spbh" placeholder="请输入药品编码" clearable></el-input>
          </el-form-item>
          <el-form-item label="仓库">
            <el-select v-model="filterForm.stoId " placeholder="请选择仓库" clearable :style="{ width: '100%' }"
                       filterable>
              <el-option v-for="item in warehousesList" :key="item.stoId" :label="item.stoName"
                         :value="item.stoId"/>
            </el-select>
          </el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="queryBtn">查畅销</el-button>
          <el-button icon="el-icon-search" type="primary" @click="queryLastBtn">查滞销</el-button>
          <el-button icon="el-icon-download" type="primary" @click="exportExcelCx">畅销excel</el-button>
          <el-button icon="el-icon-download" type="primary" @click="exportExcelZx">滞销excel</el-button>
          <el-button icon="el-icon-refresh" type="danger" @click="resetAll">重置</el-button>
        </el-form>
      </el-card>
    </div>
    <!-- 主内容区 -->
    <div class="main-content">
      <div class="table-container">
        <el-table height="calc(100vh - 310px)" :data="dataList" border style="width: 100%">
          <el-table-column prop="spbh" label="药品编码" width="90"/>
          <el-table-column prop="DrugName" label="药品名称"/>
          <el-table-column prop="DrugBatchNo" label="批号"/>
          <el-table-column prop="DrugGG" label="规格"/>
          <el-table-column prop="dw" label="单位"/>
          <el-table-column prop="TotalSales" label="销售数量"/>
          <el-table-column prop="baozhiqi" label="生产日期"/>
          <el-table-column prop="sxrq" label="有效期"/>
          <el-table-column prop="pizhwh" label="批准文号"/>
          <el-table-column prop="DrugCD" label="生产厂家"/>
        </el-table>
      </div>
    </div>
    <div class="pagination-container">
      <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="filterForm.pageNum"
                     :page-size="filterForm.pageSize"
                     :page-sizes="[20, 50,100]" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  queryWarehouseList,//获取仓库列表
} from "@/api/report/yxl.js";
import {
  querySalableDrug,//  周转率畅销商品,
  queryUnsalableDrug,//呆滞
} from '@/api/report/allNews'

export default {
  name: 'MaterialReport',
  data() {
    return {
      filterForm: {
        pageNum: 1,
        pageSize: 20,
      },
      timeList: [this.getDefaultStartDate(), this.getDefaultEndDate()],
      dataList: [],
      warehousesList: [],
      total: 0,
    }
  },
  created() {
    this.getData();//获取仓库
    this.queryBtn();//查询
  },
  methods: {
    //畅销导出
    exportExcelCx(){
      const [startDate , endDate] = Array.isArray(this.timeList) &&
      this.timeList.length === 2 ?
        this.timeList : [null, null];
      let params = {
        ...this.filterForm,
        startDate,
        endDate,
      }
      this.download('yxl/billReport/exportSalableDrug', {
        ...params
      }, `畅销药品.xlsx`)
    },
    //滞销导出
    exportExcelZx(){
      const [startDate , endDate] = Array.isArray(this.timeList) &&
      this.timeList.length === 2 ?
        this.timeList : [null, null];
      let params = {
        ...this.filterForm,
        startDate,
        endDate,
      }
      this.download('yxl/billReport/exportUnSalableDrug', {
        ...this.params
      }, `滞销药品.xlsx`)
    },
    //查询呆滞
    queryLastBtn(){
      const [startDate , endDate] = Array.isArray(this.timeList) &&
      this.timeList.length === 2 ?
        this.timeList : [null, null];
      let params = {
        ...this.filterForm,
        startDate,
        endDate,
      }
      queryUnsalableDrug(params).then(response => {
        this.dataList = response.data.rows;
        this.total = response.data.total;
      })
    },
    //获取日期
    getDefaultStartDate() {
      const date = new Date()
      date.setMonth(date.getMonth() - 1)
      return this.formatDate(date)
    },
    getDefaultEndDate() {
      return this.formatDate(new Date())
    },
    //格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    //初始化基础数据
    getData() {
      queryWarehouseList().then(res => {
        this.warehousesList = res.data;
      }).catch(error => {
        this.$message.error('获取仓库数据失败:', error);
      });
    },
    //查询
    queryBtn() {
      // 从timeList中提取开始和结束日期
      const [startDate , endDate] = Array.isArray(this.timeList) &&
      this.timeList.length === 2 ?
        this.timeList : [null, null];
      let params = {
        ...this.filterForm,
        startDate,
        endDate,
      }
      querySalableDrug(params).then(response => {
        this.dataList = response.data.rows;
        this.total = response.data.total;
      })
    },
    //分页
    handleSizeChange(val) {
      this.filterForm.pageSize = val;
      this.filterForm.pageNum = 1;
      this.queryBtn();
    },
    //重置
    resetAll(){
      this.filterForm = {
        pageNum: 1,
        pageSize: 20,
        drugName:'',
        spbh:'',
        stoId:''
      }
      this.timeList=[this.getDefaultStartDate(), this.getDefaultEndDate()];
      this.queryBtn();
    },
    handleCurrentChange(val) {
      this.filterForm.pageNum = val;
      this.queryBtn();
    },
  }
}
</script>

<style scoped>
.material-report-container {
  padding: 16px;
  background-color: #f5f7fa;
}

.filter-container {
  margin-bottom: 16px;
}

.filter-card {
  border-radius: 4px;
}

/deep/ .el-date-editor {
  width: 350px;
}

.main-content {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  display: flex;
  align-items: center;
}

.el-dropdown-link i {
  margin-left: 4px;
}

.left-chart,
.right-chart {
  height: 300px;
  background: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
</style>
